<template>
	<!-- 问题分类 -->
	<view class="questionClass">
		<view class="userTitle flex box-sizing  space-between items-center">
			<view class="box-sizing paddingLeft-30" style="width: 120rpx;">
				<u-icon @click="uni.navigateBack()" name="arrow-left" :size="25"></u-icon>
			</view>
			<view style="flex: 1;padding-left: calc(10rpx);"
				class=" flex box-sizing  flex-center items-center height-full">
				<view class="fontSize-30 weight-700 marginRight-10">
					问题分类
				</view>
			</view>
			<view class="right box-sizing paddingRight-30" style="width: 120rpx;">
				<!-- <view @click="$u.throttle(submit, 500)"
					class="submit flex flex-center items-center fontSize-27 color-white">
					提交
				</view> -->
			</view>
		</view>
		<view class="crads">
			<scroll-view :refresher-triggered="triggered" scroll-y="true"
				class="swiperItem flex column items-center box-sizing padding-30" refresher-enabled
				@refresherrefresh="scrolltoupper()">
				<view class="total flex column borderRadius-15 colorBj-fff ">
					<view class="flex flex-center items-center fontSize-24 color-white height-40 width-160 colorBj-ff6f26" style="border-radius: 15rpx 0 15rpx 0;">
						问题报告
					</view>
					<view class="height-150 width-full flex" style="padding: 30rpx 0;">
						<view class="totalItem flex column height-full items-center" style="flex: 1;">
							<view class="flex">
								<span class="fontSize-60 vertical-bottom weight-700 color-ff6f26">{{total_question}}</span>
								<span class="fontSize-35 vertical-bottom weight-700 color_ff560094 marginTop-25">条</span>
							</view>
							<view class="marginTop-10 fontSize-24">
								问题总条数
							</view>
						</view>
						<view class="totalItem flex column height-full items-center" style="flex: 1;">
							<view class="flex">
								<span class="fontSize-60 vertical-bottom weight-700 color-ff6f26">{{total_reply}}</span>
								<span class="fontSize-35 vertical-bottom weight-700 color_ff560094 marginTop-25">条</span>
							</view>
							<view class="marginTop-10 fontSize-24">
								回复总条数
							</view>
						</view>
						<view class="totalItem flex column height-full items-center" style="flex: 1;">
							<view class="flex">
								<span class="fontSize-60 vertical-bottom weight-700 color-ff6f26">{{solve}}</span>
								<span class="fontSize-35 vertical-bottom weight-700 color_ff560094 marginTop-25">%</span>
							</view>
							<view class="marginTop-10 fontSize-24">
								问题解决率
							</view>
						</view>
					</view>
					<view class="width-full colorBj-ff6f26 height-50" style="border-radius: 0 0 15rpx 15rpx;"></view>
				</view>
				<view class="wrap flex flex-wrap">
					<view @click="toList(t)" class="wrapItem flex space-between items-center" v-for="(t,i) in list" :key="i">
						<view class="flex column">
							<span class="fontSize-28 weight-700">
								{{t.title}}
							</span>
							<span class="fontSize-22 color-6d6d6d" style="min-height:15px;">
								{{t.question_num?'问题数:'+t.question_num:''}}{{t.question_num&&t.reply_num?' / ':''}}{{t.reply_num?'回复数:'+t.reply_num:''}}
							</span>
						</view>
						<view class="">
							<u-icon name="file-text" :size="25" color="#ff6f26"></u-icon>
						</view>
					</view>
				</view>

			</scroll-view>
		</view>
		</view>
</template>

<script>
export default {
	data() {
		return {
			triggered: false,
			list: [],
			solve:0,
			total_question:0,
			total_reply:0,
		};
	},
	onLoad() {
		this.getList()
	},
	methods: {
		toList(t){
			uni.navigateTo({
				url:`/pages/index/questionList?faq_type=${t.faq_type}&title=${t.title}`
			})
		},
		getList() {
			uni.showLoading();
			this.$first.faqtypelist().then(res => {
				console.log(res, '*******');
				this.list = res.list
				this.solve = res.solve
				this.total_question = res.total_question
				this.total_reply = res.total_reply
				this.triggered = false
				uni.hideLoading();
			}).catch(err => {
				uni.hideLoading();
			})
		},
		scrolltoupper() {
			this.triggered = true
			this.getList()
		},
	}
}
</script>

<style lang="scss">
.questionClass {
	height: 100vh;
	box-sizing: border-box;
	background-color: #F8F9FD;
	.userTitle {
		width: 100%;
		height: 120rpx;
		box-sizing: border-box;
		padding-top: var(--status-bar-height);
		background-color: #fff;
		border-bottom: 1rpx solid #ededed;
	}
	

	.crads {
		width: 100%;

		// height: calc(100vh - 140rpx - 120rpx);
		// overflow-y: auto;
		.swiperItem {
			width: 100%;
			height: calc(100vh - 120rpx);
			// overflow-y: auto;
			display: flex;
			flex-direction: column;
			align-items: center;
			.total{
				.totalItem{
					border-right: 1rpx solid #ededed;
					&:last-child{
						border: none;
					}
				}
			}
			.wrap{
				margin-top: 20rpx;
				.wrapItem{
					width: calc(50% - 10rpx);
					margin-right: 19rpx;
					background-color: #fff;
					border-radius: 8rpx;
					box-sizing: border-box;
					padding: 30rpx;
					margin-bottom: 15rpx;
					&:nth-child(even){
						margin-right: 0rpx;
					}
				}
			}
		}

		.card {
			margin: 0 auto 30rpx;
			width: calc(100% - 60rpx);
			color: #333;
		}

		.color-f6ffff {
			background-color: #f6ffff;
		}

		.color-fff8f6 {
			background-color: #fff8f6;
		}
	}

}
</style>
